<template>
  <div class="login">
    <div class="form">
      <div class="login-title">用户登录</div>
      <van-form @submit="onSubmit">
        <van-field v-model="state.username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="state.password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { useRouter } from 'vue-router'

  export default defineComponent({
    setup() {
      const router = useRouter()
      const state = reactive({
        username: '',
        password: '',
      })
      const onSubmit = (values: any) => {
        console.log('submit', values)
        router.push({ path: '/' })
      }
      return {
        state,
        onSubmit,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .login {
    background: #fff;
    padding: 20px;
    .form {
      position: fixed;
      top: 30%;
      left: 50%;
      width: 80%;
      transform: translate(-50%, -50%);
      .login-title {
        text-align: center;
        font-size: 24px;
        padding-bottom: 40px;
      }
    }
  }
</style>
